import logger from 'loglevel';
import { IBizUnitConfig, sizeExpr } from '../core';
import { BizUnit } from '../core';
import { BaseLayer, IconLayer, LineLayer } from '../core/map/layers';
import { getSegmentPoints } from './splitLine';
const lineCoords = [
  [116.95611877205698, 36.66617311741226],
  [116.98521537544974, 36.63980011265029],
  [117.01074476982893, 36.66682885750116],
  [117.02778739693395, 36.640626557962264],
];

/**
 * 自定义业务单元类，继承自 BizUnit
 * 该类用于处理告警逻辑
 */
export class LineBizUnit extends BizUnit {
  override sizeScale = 2;
  unitType = 'myline'; // 业务单元类型

  override async updateGeoData(
    cfg: IBizUnitConfig | null,
    data?: GeoJSON.Feature<GeoJSON.Geometry, GeoJSON.GeoJsonProperties>[],
  ): Promise<void> {
    console.log('无用的配置数据', cfg);
    const features =
      data ||
      ([
        {
          type: 'Feature',
          geometry: {
            type: 'LineString',
            coordinates: lineCoords,
          },
          id: 'myline.1',
          properties: {
            name: '大折线',
            type: 'myline',
            rt_state: 'normal',
          },
        },
      ] as GeoJSON.Feature<GeoJSON.Geometry, GeoJSON.GeoJsonProperties>[]);
    this.engiGis.addOrUpdateSource(this.sourceId, {
      type: 'geojson',
      data: {
        type: 'FeatureCollection',
        features,
      },
    });
    this.engiGis.addOrUpdateSource(this.sourceId + '_icon', {
      type: 'geojson',
      data: {
        type: 'FeatureCollection',
        features: [1, 2, 3, 4, 5].map(idx => {
          return {
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: getSegmentPoints(lineCoords as [number, number][], 5, idx).start,
            },
            properties: {
              name: `点 ${idx}`,
              type: 'myicon',
            },
          };
        })
      }
    })
  }

  async setRenderer(config: IBizUnitConfig): Promise<BaseLayer[]> {
    logger.info('开始绘制告警图层');
    const icons = {
      'green-dot': 'public/icons/heatplant-green.png',
    };
    await this.engiGis.mapCore.loadImages(icons);
    const iconLayer = new IconLayer(
      {
        layerId: this.layerId + '_icon',
        sourceId: this.sourceId + '_icon',
        map: this.map,
        sort: config.sort || 0,
      },
      {
        layout: {
          'icon-image': 'green-dot',
          'icon-size': 1,
          'icon-allow-overlap': true,
        },
        paint: {
          'icon-color': '#00ff00',
        },
      },
    );
    // 绘制管线图层
    const lineLayer = new LineLayer(
      {
        layerId: this.layerId,
        sourceId: this.sourceId,
        map: this.map,
        sort: config.sort || 0,
      },
      {
        layout: {
          'line-cap': 'round',
          'line-join': 'round',
          'line-miter-limit': 2,
          'line-round-limit': 1,
          'line-sort-key': config.sort || 0,
        },
        paint: {
          'line-color': '#f00000',
          'line-width': 5,
          'line-opacity': 0.8,
        },
      },
    );
    return [lineLayer, iconLayer];
  }
}
